import { View } from "@tarojs/components";
import { Icon } from "@/components";
import style from "./index.module.scss";
import { ApiEventOnlyMapping } from "@/data/user/userTypes";
import { ApiItemTypeMapping } from "@/data/shared/entityShapes";

type NotificationProps = {
  name: string;
  notificationType: "gift-event" | "queue-spot-ready";
  eventType: ApiEventOnlyMapping;
  modalOpeningCb: () => void;
  closeCb: () => void;
};

const eventTranslation: {
  [key in ApiEventOnlyMapping]: string;
} = {
  [ApiItemTypeMapping.Course]: "课程",
  [ApiItemTypeMapping.CourseDiscovery]: "套课",
  [ApiItemTypeMapping.Talk]: "讲座",
  [ApiItemTypeMapping.Exhibition]: "展览",
};

export const C43Notification = ({
  notificationType,
  name,
  eventType,
  modalOpeningCb,
  closeCb,
}: NotificationProps) => {
  const translatedEvent = eventTranslation[eventType];

  const isGiftEvent = notificationType === "gift-event";

  const text = isGiftEvent
    ? `您被赠予了一节${translatedEvent}，是否`
    : `您候补的${translatedEvent}:“${name}”已有席位，`;
  const linkStyledText = isGiftEvent ? "接受" : "点击查看";

  return (
    <View
      className={style["notification-wrapper"]}
      onClick={() => {
        modalOpeningCb();
      }}
    >
      <View className={style.text}>
        {text}
        <View className={style.link}>{linkStyledText}</View>
        {isGiftEvent ? "？" : ""}
      </View>
      <Icon
        type={"CloseWhite"}
        className={style.close}
        onClick={(e) => {
          e.stopPropagation();
          closeCb();
        }}
      />
    </View>
  );
};
